मजबूत, रखरखाव योग्य और त्रुटि-मुक्त वेब एप्लीकेशन के लिए टाइपस्क्रिप्ट में टाइप-सेफ एपीआई कॉल्स में महारत हासिल करें। सर्वोत्तम प्रथाओं और उन्नत तकनीकों को सीखें।
टाइपस्क्रिप्ट के साथ टाइप-सेफ एपीआई कॉल्स: एक व्यापक गाइड
आधुनिक वेब डेवलपमेंट में, एपीआई के साथ इंटरैक्ट करना एक मौलिक कार्य है। टाइपस्क्रिप्ट, अपने शक्तिशाली टाइप सिस्टम के साथ, टाइप-सेफ एपीआई कॉल्स को सक्षम करके आपके एप्लीकेशन की विश्वसनीयता और रखरखाव सुनिश्चित करने में एक महत्वपूर्ण लाभ प्रदान करता है। यह गाइड बताएगा कि कैसे टाइपस्क्रिप्ट की विशेषताओं का लाभ उठाकर मजबूत और त्रुटि-मुक्त एपीआई इंटरैक्शन बनाया जाए, जिसमें सर्वोत्तम प्रथाओं, उन्नत तकनीकों और वास्तविक-दुनिया के उदाहरणों को शामिल किया गया है।
एपीआई कॉल्स के लिए टाइप सेफ्टी क्यों महत्वपूर्ण है
जब आप एपीआई के साथ काम करते हैं, तो आप अनिवार्य रूप से बाहरी स्रोत से आने वाले डेटा से निपट रहे होते हैं। यह डेटा हमेशा आपके अपेक्षित प्रारूप में नहीं हो सकता है, जिससे रनटाइम एरर और अप्रत्याशित व्यवहार हो सकता है। टाइप सेफ्टी यह सत्यापित करके सुरक्षा की एक महत्वपूर्ण परत प्रदान करती है कि आपके द्वारा प्राप्त डेटा एक पूर्वनिर्धारित संरचना के अनुरूप है, जिससे विकास प्रक्रिया में संभावित मुद्दों को जल्दी पकड़ा जा सकता है।
- रनटाइम एरर में कमी: कंपाइल टाइम पर टाइप चेकिंग, प्रोडक्शन में पहुंचने से पहले टाइप-संबंधित एरर को पहचानने और ठीक करने में मदद करती है।
- बेहतर कोड मेंटेनेबिलिटी: स्पष्ट टाइप परिभाषाएं आपके कोड को समझना और संशोधित करना आसान बनाती हैं, जिससे रिफैक्टरिंग के दौरान बग आने का खतरा कम हो जाता है।
- बेहतर कोड पठनीयता: टाइप एनोटेशन मूल्यवान डॉक्यूमेंटेशन प्रदान करते हैं, जिससे डेवलपर्स के लिए अपेक्षित डेटा संरचनाओं को समझना आसान हो जाता है।
- बेहतर डेवलपर अनुभव: आईडीई (IDE) सपोर्ट के लिए टाइप चेकिंग और ऑटो-कम्प्लीशन डेवलपर अनुभव में काफी सुधार करता है और एरर की संभावना को कम करता है।
अपना टाइपस्क्रिप्ट प्रोजेक्ट सेटअप करना
एपीआई कॉल्स में जाने से पहले, सुनिश्चित करें कि आपके पास एक टाइपस्क्रिप्ट प्रोजेक्ट सेटअप है। यदि आप शुरू से शुरू कर रहे हैं, तो आप इसका उपयोग करके एक नया प्रोजेक्ट शुरू कर सकते हैं:
npm init -y
npm install typescript --save-dev
tsc --init
यह डिफ़ॉल्ट टाइपस्क्रिप्ट कंपाइलर विकल्पों के साथ एक `tsconfig.json` फ़ाइल बनाएगा। आप इन विकल्पों को अपने प्रोजेक्ट की जरूरतों के अनुसार अनुकूलित कर सकते हैं। उदाहरण के लिए, आप सख्त टाइप चेकिंग के लिए स्ट्रिक्ट मोड को सक्षम करना चाह सकते हैं:
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
एपीआई रिस्पांस के लिए टाइप्स को परिभाषित करना
टाइप-सेफ एपीआई कॉल्स प्राप्त करने में पहला कदम टाइपस्क्रिप्ट टाइप्स को परिभाषित करना है जो एपीआई से प्राप्त होने वाले डेटा की अपेक्षित संरचना का प्रतिनिधित्व करते हैं। यह आमतौर पर `interface` या `type` घोषणाओं का उपयोग करके किया जाता है।
इंटरफेस का उपयोग करना
इंटरफेस किसी ऑब्जेक्ट के आकार को परिभाषित करने का एक शक्तिशाली तरीका है। उदाहरण के लिए, यदि आप किसी एपीआई से उपयोगकर्ताओं की सूची प्राप्त कर रहे हैं, तो आप इस तरह एक इंटरफ़ेस परिभाषित कर सकते हैं:
interface User {
id: number;
name: string;
email: string;
address?: string; // Optional property
phone?: string; // Optional property
website?: string; // Optional property
company?: {
name: string;
catchPhrase: string;
bs: string;
};
}
प्रॉपर्टी नाम के बाद `?` यह इंगित करता है कि प्रॉपर्टी वैकल्पिक है। यह उन एपीआई रिस्पांस को संभालने के लिए उपयोगी है जहां कुछ फ़ील्ड गायब हो सकते हैं।
टाइप्स का उपयोग करना
टाइप्स इंटरफेस के समान हैं लेकिन अधिक लचीलापन प्रदान करते हैं, जिसमें यूनियन टाइप और इंटरसेक्शन टाइप को परिभाषित करने की क्षमता शामिल है। आप ऊपर दिए गए इंटरफ़ेस के समान परिणाम टाइप का उपयोग करके प्राप्त कर सकते हैं:
type User = {
id: number;
name: string;
email: string;
address?: string; // Optional property
phone?: string; // Optional property
website?: string; // Optional property
company?: {
name: string;
catchPhrase: string;
bs: string;
};
};
सरल ऑब्जेक्ट संरचनाओं के लिए, इंटरफेस और टाइप्स अक्सर एक दूसरे के स्थान पर उपयोग किए जा सकते हैं। हालांकि, अधिक जटिल परिदृश्यों से निपटने के दौरान टाइप्स अधिक शक्तिशाली हो जाते हैं।
Axios के साथ एपीआई कॉल्स करना
Axios जावास्क्रिप्ट और टाइपस्क्रिप्ट में एपीआई रिक्वेस्ट करने के लिए एक लोकप्रिय HTTP क्लाइंट है। यह एक स्वच्छ और सहज एपीआई प्रदान करता है, जिससे विभिन्न HTTP तरीकों, रिक्वेस्ट हेडर और रिस्पांस डेटा को संभालना आसान हो जाता है।
Axios इंस्टॉल करना
npm install axios
एक टाइप्ड एपीआई कॉल करना
Axios के साथ एक टाइप-सेफ एपीआई कॉल करने के लिए, आप `axios.get` विधि का उपयोग कर सकते हैं और जेनेरिक का उपयोग करके अपेक्षित रिस्पांस टाइप निर्दिष्ट कर सकते हैं:
import axios from 'axios';
async function fetchUsers(): Promise {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
return response.data;
} catch (error) {
console.error('Error fetching users:', error);
throw error;
}
}
fetchUsers().then(users => {
users.forEach(user => {
console.log(user.name);
});
});
इस उदाहरण में, `axios.get
विभिन्न HTTP तरीकों को संभालना
Axios विभिन्न HTTP तरीकों का समर्थन करता है, जिनमें `GET`, `POST`, `PUT`, `DELETE`, और `PATCH` शामिल हैं। आप विभिन्न प्रकार के एपीआई रिक्वेस्ट करने के लिए संबंधित तरीकों का उपयोग कर सकते हैं। उदाहरण के लिए, एक नया उपयोगकर्ता बनाने के लिए, आप `axios.post` विधि का उपयोग कर सकते हैं:
async function createUser(user: Omit): Promise {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/users', user);
return response.data;
} catch (error) {
console.error('Error creating user:', error);
throw error;
}
}
const newUser = {
name: 'John Doe',
email: 'john.doe@example.com',
address: '123 Main St',
phone: '555-1234',
website: 'example.com',
company: {
name: 'Example Corp',
catchPhrase: 'Leading the way',
bs: 'Innovative solutions'
}
};
createUser(newUser).then(user => {
console.log('Created user:', user);
});
इस उदाहरण में, `Omit
Fetch API का उपयोग करना
Fetch API HTTP रिक्वेस्ट करने के लिए एक अंतर्निहित (built-in) जावास्क्रिप्ट एपीआई है। हालांकि यह Axios की तुलना में अधिक बुनियादी है, इसे टाइपस्क्रिप्ट के साथ टाइप-सेफ एपीआई कॉल्स प्राप्त करने के लिए भी इस्तेमाल किया जा सकता है। यदि यह आपकी आवश्यकताओं के अनुरूप है तो आप एक निर्भरता जोड़ने से बचने के लिए इसे पसंद कर सकते हैं।
Fetch के साथ एक टाइप्ड एपीआई कॉल करना
Fetch के साथ एक टाइप-सेफ एपीआई कॉल करने के लिए, आप `fetch` फ़ंक्शन का उपयोग कर सकते हैं और फिर रिस्पांस को JSON के रूप में पार्स कर सकते हैं, अपेक्षित रिस्पांस टाइप निर्दिष्ट करते हुए:
async function fetchUsers(): Promise {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: User[] = await response.json();
return data;
} catch (error) {
console.error('Error fetching users:', error);
throw error;
}
}
fetchUsers().then(users => {
users.forEach(user => {
console.log(user.name);
});
});
इस उदाहरण में, `const data: User[] = await response.json();` टाइपस्क्रिप्ट को बताता है कि रिस्पांस डेटा को `User` ऑब्जेक्ट्स की एक ऐरे (array) के रूप में माना जाना चाहिए। यह टाइपस्क्रिप्ट को टाइप चेकिंग और ऑटो-कम्प्लीशन करने की अनुमति देता है।
Fetch के साथ विभिन्न HTTP तरीकों को संभालना
Fetch के साथ विभिन्न प्रकार के एपीआई रिक्वेस्ट करने के लिए, आप `fetch` फ़ंक्शन का उपयोग विभिन्न विकल्पों, जैसे `method` और `body` विकल्पों के साथ कर सकते हैं। उदाहरण के लिए, एक नया उपयोगकर्ता बनाने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:
async function createUser(user: Omit): Promise {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: User = await response.json();
return data;
} catch (error) {
console.error('Error creating user:', error);
throw error;
}
}
const newUser = {
name: 'John Doe',
email: 'john.doe@example.com',
address: '123 Main St',
phone: '555-1234',
website: 'example.com',
company: {
name: 'Example Corp',
catchPhrase: 'Leading the way',
bs: 'Innovative solutions'
}
};
createUser(newUser).then(user => {
console.log('Created user:', user);
});
एपीआई एरर को संभालना
एरर हैंडलिंग एपीआई कॉल्स का एक महत्वपूर्ण पहलू है। एपीआई कई कारणों से विफल हो सकते हैं, जिनमें नेटवर्क कनेक्टिविटी समस्याएं, सर्वर एरर और अमान्य रिक्वेस्ट शामिल हैं। अपने एप्लीकेशन को क्रैश होने या अप्रत्याशित व्यवहार प्रदर्शित करने से रोकने के लिए इन एरर को शालीनता से संभालना आवश्यक है।
ट्राई-कैच ब्लॉक्स का उपयोग करना
एसिंक्रोनस कोड में एरर को संभालने का सबसे आम तरीका ट्राई-कैच ब्लॉक्स का उपयोग करना है। यह आपको एपीआई कॉल के दौरान फेंके गए किसी भी एक्सेप्शन को पकड़ने और उन्हें उचित रूप से संभालने की अनुमति देता है।
async function fetchUsers(): Promise {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
return response.data;
} catch (error) {
console.error('Error fetching users:', error);
// Handle the error, e.g., display an error message to the user
throw error; // Re-throw the error to allow calling code to handle it as well
}
}
विशिष्ट एरर कोड्स को संभालना
एपीआई अक्सर हुए एरर के प्रकार को इंगित करने के लिए विशिष्ट एरर कोड लौटाते हैं। आप अधिक विशिष्ट एरर हैंडलिंग प्रदान करने के लिए इन एरर कोड्स का उपयोग कर सकते हैं। उदाहरण के लिए, आप 404 नॉट फाउंड एरर के लिए 500 इंटरनल सर्वर एरर से अलग एरर संदेश प्रदर्शित करना चाह सकते हैं।
async function fetchUser(id: number): Promise {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
return response.data;
} catch (error: any) {
if (error.response?.status === 404) {
console.log(`User with ID ${id} not found.`);
return null; // Or throw a custom error
} else {
console.error('Error fetching user:', error);
throw error;
}
}
}
fetchUser(123).then(user => {
if (user) {
console.log('User:', user);
} else {
console.log('User not found.');
}
});
कस्टम एरर टाइप्स बनाना
अधिक जटिल एरर हैंडलिंग परिदृश्यों के लिए, आप विभिन्न प्रकार के एपीआई एरर का प्रतिनिधित्व करने के लिए कस्टम एरर टाइप्स बना सकते हैं। यह आपको अधिक संरचित एरर जानकारी प्रदान करने और एरर को अधिक प्रभावी ढंग से संभालने की अनुमति देता है।
class ApiError extends Error {
constructor(public statusCode: number, message: string) {
super(message);
this.name = 'ApiError';
}
}
async function fetchUser(id: number): Promise {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
return response.data;
} catch (error: any) {
if (error.response?.status === 404) {
throw new ApiError(404, `User with ID ${id} not found.`);
} else {
console.error('Error fetching user:', error);
throw new ApiError(500, 'Internal Server Error'); //Or any other suitable status code
}
}
}
fetchUser(123).catch(error => {
if (error instanceof ApiError) {
console.error(`API Error: ${error.statusCode} - ${error.message}`);
} else {
console.error('An unexpected error occurred:', error);
}
});
डेटा वैलिडेशन
टाइपस्क्रिप्ट के टाइप सिस्टम के साथ भी, रनटाइम पर एपीआई से प्राप्त डेटा को मान्य करना महत्वपूर्ण है। एपीआई बिना किसी सूचना के अपनी रिस्पांस संरचना को बदल सकते हैं, और आपके टाइपस्क्रिप्ट टाइप्स हमेशा एपीआई के वास्तविक रिस्पांस के साथ पूरी तरह से सिंक्रनाइज़ नहीं हो सकते हैं।
रनटाइम वैलिडेशन के लिए Zod का उपयोग करना
Zod रनटाइम डेटा वैलिडेशन के लिए एक लोकप्रिय टाइपस्क्रिप्ट लाइब्रेरी है। यह आपको स्कीमा परिभाषित करने की अनुमति देता है जो आपके डेटा की अपेक्षित संरचना का वर्णन करता है और फिर रनटाइम पर उन स्कीमा के विरुद्ध डेटा को मान्य करता है।
Zod इंस्टॉल करना
npm install zod
Zod के साथ एपीआई रिस्पांस को मान्य करना
Zod के साथ एपीआई रिस्पांस को मान्य करने के लिए, आप एक Zod स्कीमा परिभाषित कर सकते हैं जो आपके टाइपस्क्रिप्ट टाइप से मेल खाता है और फिर डेटा को मान्य करने के लिए `parse` विधि का उपयोग कर सकते हैं।
import { z } from 'zod';
const userSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string().email(),
address: z.string().optional(),
phone: z.string().optional(),
website: z.string().optional(),
company: z.object({
name: z.string(),
catchPhrase: z.string(),
bs: z.string(),
}).optional(),
});
type User = z.infer;
async function fetchUsers(): Promise {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const data = z.array(userSchema).parse(response.data);
return data;
} catch (error) {
console.error('Error fetching users:', error);
throw error;
}
}
इस उदाहरण में, `z.array(userSchema).parse(response.data)` यह मान्य करता है कि रिस्पांस डेटा उन ऑब्जेक्ट्स की एक ऐरे (array) है जो `userSchema` के अनुरूप है। यदि डेटा स्कीमा के अनुरूप नहीं है, तो Zod एक एरर फेंकेगा, जिसे आप फिर उचित रूप से संभाल सकते हैं।
उन्नत तकनीकें
पुन: प्रयोज्य एपीआई फ़ंक्शंस के लिए जेनेरिक का उपयोग करना
जेनेरिक आपको पुन: प्रयोज्य एपीआई फ़ंक्शंस लिखने की अनुमति देते हैं जो विभिन्न प्रकार के डेटा को संभाल सकते हैं। उदाहरण के लिए, आप एक जेनेरिक `fetchData` फ़ंक्शन बना सकते हैं जो किसी भी एपीआई एंडपॉइंट से डेटा प्राप्त कर सकता है और इसे सही टाइप के साथ लौटा सकता है।
async function fetchData(url: string): Promise {
try {
const response = await axios.get(url);
return response.data;
} catch (error) {
console.error(`Error fetching data from ${url}:`, error);
throw error;
}
}
// Usage
fetchData('https://jsonplaceholder.typicode.com/users').then(users => {
console.log('Users:', users);
});
fetchData<{ title: string; body: string }>('https://jsonplaceholder.typicode.com/todos/1').then(todo => {
console.log('Todo', todo)
});
ग्लोबल एरर हैंडलिंग के लिए इंटरसेप्टर्स का उपयोग करना
Axios इंटरसेप्टर्स प्रदान करता है जो आपको आपके कोड द्वारा संभाले जाने से पहले रिक्वेस्ट और रिस्पांस को इंटरसेप्ट करने की अनुमति देता है। आप ग्लोबल एरर हैंडलिंग को लागू करने के लिए इंटरसेप्टर्स का उपयोग कर सकते हैं, जैसे कि एरर लॉग करना या उपयोगकर्ता को एरर संदेश प्रदर्शित करना।
axios.interceptors.response.use(
(response) => response,
(error) => {
console.error('Global error handler:', error);
// Display an error message to the user
return Promise.reject(error);
}
);
एपीआई यूआरएल के लिए एनवायरनमेंट वेरिएबल्स का उपयोग करना
अपने कोड में एपीआई यूआरएल को हार्डकोड करने से बचने के लिए, आप यूआरएल को स्टोर करने के लिए एनवायरनमेंट वेरिएबल्स का उपयोग कर सकते हैं। यह आपके एप्लीकेशन को विभिन्न एनवायरनमेंट, जैसे कि डेवलपमेंट, स्टेजिंग और प्रोडक्शन के लिए कॉन्फ़िगर करना आसान बनाता है।
`.env` फ़ाइल और `dotenv` पैकेज का उपयोग करके उदाहरण।
// .env
API_URL=https://api.example.com
// Install dotenv
npm install dotenv
// Import and configure dotenv
import * as dotenv from 'dotenv'
dotenv.config()
const apiUrl = process.env.API_URL || 'http://localhost:3000'; // provide a default value
async function fetchData(endpoint: string): Promise {
try {
const response = await axios.get(`${apiUrl}/${endpoint}`);
return response.data;
} catch (error) {
console.error(`Error fetching data from ${apiUrl}/${endpoint}:`, error);
throw error;
}
}
निष्कर्ष
टाइप-सेफ एपीआई कॉल्स मजबूत, रखरखाव योग्य और त्रुटि-मुक्त वेब एप्लीकेशन बनाने के लिए आवश्यक हैं। टाइपस्क्रिप्ट शक्तिशाली सुविधाएँ प्रदान करता है जो आपको एपीआई रिस्पांस के लिए टाइप्स परिभाषित करने, रनटाइम पर डेटा को मान्य करने और एरर को शालीनता से संभालने में सक्षम बनाती हैं। इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं और तकनीकों का पालन करके, आप अपने एपीआई इंटरैक्शन की गुणवत्ता और विश्वसनीयता में काफी सुधार कर सकते हैं।
टाइपस्क्रिप्ट और Axios और Zod जैसी लाइब्रेरियों का उपयोग करके, आप यह सुनिश्चित कर सकते हैं कि आपके एपीआई कॉल्स टाइप-सेफ हैं, आपका डेटा मान्य है, और आपके एरर शालीनता से संभाले जाते हैं। इससे अधिक मजबूत और रखरखाव योग्य एप्लीकेशन बनेंगे।
याद रखें कि टाइपस्क्रिप्ट के टाइप सिस्टम के साथ भी, हमेशा रनटाइम पर अपने डेटा को मान्य करें। एपीआई बदल सकते हैं, और आपके टाइप्स हमेशा एपीआई के वास्तविक रिस्पांस के साथ पूरी तरह से सिंक्रनाइज़ नहीं हो सकते हैं। रनटाइम पर अपने डेटा को मान्य करके, आप अपने एप्लीकेशन में समस्याओं का कारण बनने से पहले संभावित मुद्दों को पकड़ सकते हैं।
हैप्पी कोडिंग!